<!DOCTYPE html>
<html lang="en">
<body>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1,user-scalable=0" name="viewport">
<title>学生码</title>
<link href="../../public/plugin/weui/weui.min.css" rel="stylesheet">
<link href="../../public/plugin/jquery-weui/css/jquery-weui.min.css" rel="stylesheet">
<link href="../../public/plugin/vant/index.css" rel="stylesheet">
<link href="../../public/css/common.css?v=20201027" rel="stylesheet">

<style>
    html, body, #app {
        margin: 0;
        width: 100%;
        height: 100%;
    }

    #qrcode {
        text-align: center;
        display: flex;
        justify-content: center;
    }

    #qrcode img, #qrcode canvas {
        width: 200px;
        border: 10px solid white;
    }

    .banner {
        width: 100%;
        height: 200px;
    }

    .banner img {
        width: 100%;
        height: 100%;
    }

    .wrapper {
        text-align: center;
        position: absolute;
        top: 190px;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        background: ghostwhite;
        border-radius: 10px;
    }

    .wrapper .avatar {
        margin-top: -40px;
    }

    .wrapper .avatar img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 2px solid #9f99ff;
    }

    .wrapper .info .username {
        color: #777;
    }

    .wrapper .tips {
        margin-top: 15px;
        color: #666;
    }

</style>

<div id="app" v-cloak>
    <div class="banner">
        <van-swipe :autoplay="3000" class="my-swipe" indicator-color="white">
            <van-swipe-item v-for="item in bannerList">
                <img :src="item.imgUrl" alt="">
            </van-swipe-item>
        </van-swipe>
    </div>
    <div class="wrapper">
        <div class="avatar">
            <img :src="userInfo ? userInfo.headImgUrl : ''" alt="">
        </div>
        <div class="info">
            <div class="username">{{ userInfo ? userInfo.nickname : '' }}</div>
        </div>
        <div class="qrcode" id="qrcode"></div>
    </div>
    <div @click="WXUtils.goHome()" class="home-btn">
        <img alt="" src="../../public/image/icon/home.svg">
    </div>
</div>
<script src="../../public/plugin/jquery/jquery.min.js" type="text/javascript"></script>
<script src="../../public/plugin/jquery-weui/js/jquery-weui.min.js" type="text/javascript"></script>
<script src="../../public/plugin/jquery-weui/js/swiper.min.js" type="text/javascript"></script>
<script src="../../public/plugin/vue/vue.min.js" type="text/javascript"></script>
<script src="../../public/plugin/qrcodejs/qrcode.min.js" type="text/javascript"></script>
<script src="../../public/plugin/vant/vant.min.js" type="text/javascript"></script>
<script src="../../public/js/common.js?v=202304190021" type="text/javascript"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            userInfo: null,
            bannerList: []
        },
        mounted: function () {
            let self = this;
            MemberUtils.getUserInfo().then(function (res) {
                console.log(res);
                if (res && res.code === 200) {
                    self.userInfo = res.data;
                    new QRCode(document.getElementById("qrcode"), self.userInfo.openId);
                } else {
                    oAuth2UserInfo();
                }
            });
        }
    })
</script>
</body>
</html>
